<!--意见反馈-->
<template>
    <div class="feedback_container">
        <!-- <div class="header">
            <span>意见反馈</span>
            <span class="el-icon-close"></span>
        </div> -->
        <div class="feedbackBox">
            <p class="title">意见反馈</p>
            <p class='titleContent'>感谢您的宝贵意见</p>
            <span class="hint">{{hint}}</span>
            <el-input
            class="textareaBox"
            type="textarea"
            minlength="10"
            resize='none'
            placeholder="请详细描述您所遇到得问题！（描述不得少于10个字）"
            v-model.trim="params.content">
            </el-input>
            <p class="successHint">{{success}}</p>
            <p class="submit" @click='submitBtn'>提交</p>
        </div>
    </div>
</template>
<script>
import {getUrlParams} from "@/common/common";
const {token,clientVersion,productId} = getUrlParams();
import {submitFeedback} from "../api/index";
export default {
    components:{},
    data() {
        return {
            hint:'',
            params: {
                centralToken:token,
                productId:productId,
                clientVersion:clientVersion,
                content:''
            },
            success:''
        };
    },
    methods: {
        // 意见反馈提交
        async submitBtn(){
            if(this.params.content==''){
                this.hint='*请填写您的宝贵意见'
                return;
            }
            if(this.params.content.length<10&&this.params.content!=''){
                this.hint='*描述不得少于10个字'
                return;
            }else{
                this.hint=''
            }
            await submitFeedback(this.params).then((back)=>{
                if(back.status==1){
                    this.success='提交成功，感谢反馈！' ;
                    setTimeout(()=>{
                        window.prompt("",`up://["click.id",1666594169854,{"type":"feedback","msg":"success"}]`); 
                    },2000)
                    // window.prompt("",`up://["user.info",${Date.now()},{"type":"意见反馈","msg":"反馈成功"}]`); 
                    
                }
            }).catch(err=>{
                this.$message.error(err.msg)
            })
        },
    },

};
</script>
<style scoped lang="scss">
.feedback_container{
    width: 649px;
    height: 511px;
    background: #FFFFFF;
    margin: auto;
    font-family: Microsoft YaHei;
    padding: 0;
    box-sizing: border-box;
    font-size: 0;
    overflow: hidden;
    .header{
        width: 100%;
        height: 34px;
        align-items: center;
        display: flex;
        justify-content: space-between;
        padding: 0 12px 0 10px;  
        font-size: 15px;
        font-weight: 400;
        color: #FFFFFF;
        background: #434448;
        box-sizing: border-box;
    }
    .feedbackBox{
        width: 100%;
        max-height: 511px;
        height: 511px;
        background: #FFFFFF;
        border: 1px solid #E1E1E1;
        padding: 48px 0 60px;
        font-size: 16px;
        font-weight: 400;
        box-sizing: border-box;
        .title{
            font-weight: bold;
            text-align: center;
            font-size: 32px;
            color: #333333;
        }
        .titleContent{
            text-align: center;
            color: #666666;
            padding: 18px 0 7px;
        }
        .hint{
            display: inline-block;
            font-size: 16px;
            color: #FF8A00;
            padding: 0 60px 8px;
            box-sizing: border-box;
        }
        .textareaBox{
            padding: 0 60px;
            box-sizing: border-box;
            /deep/.el-textarea__inner{
                width: 100%;
                height: 214px;
                background: #F7F8FA;
                color: #999;
                border: 1px solid #DEDEDE;
                border-radius: 8px;
            }
        }
        .successHint{
            text-align: center;
            font-size: 16px;
            color: #EA2827;
            height: 30px;
            line-height: 30px;
        }
        .submit{
            width: 200px;
            height: 60px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #FFFFFF;
            border-radius: 8px;
            font-size: 24px;
            background: #EA2827; 
            margin:auto;
            cursor: pointer;
        }
    }
}

</style>
